<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习资源 - 贵州省先进计算省重点实验室</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/learning.css' %}">
</head>
<body>
<div class="data-source-indicator" id="dataSourceIndicator"></div>

<div class="header">
    <h1>贵州省先进计算省重点实验室</h1>
</div>

<div class="main-container">
    <!-- 左侧功能选择面板 -->
    <div class="function-sidebar">
        <h3>🛠️ 功能选择</h3>

        <div class="function-item" data-function="chat" onclick="window.location.href='/index/'">
            <h4><span class="function-icon">💬</span> 智能对话</h4>
            <p>与AI助手进行心理咨询对话，获得情感支持和建议</p>
        </div>

        <div class="function-item" data-function="assessment" onclick="window.location.href='/api/question_page'">
            <h4><span class="function-icon">📊</span> 心理评估</h4>
            <p>进行专业的心理健康评估测试，了解自己的心理状态</p>
        </div>

        <div class="function-item" data-function="image-review" onclick="window.location.href='/picture/'">
            <h4><span class="function-icon">🔍</span> 图片分析</h4>
            <p>上传并分析图片内容，识别潜在的心理健康相关信息</p>
        </div>

        <div class="function-item active" data-function="resources" onclick="window.location.href='/learning/'">
            <h4><span class="function-icon">📚</span> 学习资源</h4>
            <p>浏览心理健康相关的文章、书籍和学习材料</p>
        </div>

        <div class="function-item" data-function="crisis" onclick="window.location.href='/crisis/'">
            <h4><span class="function-icon">🆘</span> 危机干预</h4>
            <p>在紧急情况下获得及时的心理支持和帮助</p>
        </div>
    </div>

    <!-- 学习资源主内容区 -->
    <div class="resources-content">
        <div class="resources-header">
            <h2>📚 心理健康学习资源</h2>
            <p>丰富的学习材料助您深入了解心理健康知识</p>
        </div>

        <!-- 搜索和筛选区域 -->
        <div class="search-section">
            <div class="search-container">
                <input type="text" class="search-input" placeholder="搜索学习资源..." id="searchInput">
                <button class="search-button" onclick="searchResources()" id="searchButton">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                        <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
                        <path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    搜索
                </button>
            </div>
            <div class="filter-tags">
                <div class="filter-tag active" data-filter="all">全部</div>
                <div class="filter-tag" data-filter="knowledge">青春悄悄话</div>
                <div class="filter-tag" data-filter="trouble">成长小烦恼</div>
                <div class="filter-tag" data-filter="girl">心情小秘密</div>
                <div class="filter-tag" data-filter="boy">成长大冒险</div>
            </div>
        </div>

        <!-- 热门分类 -->
        <div class="categories-section">
            <h3 class="categories-title">🔥 热门分类</h3>
            <div class="categories-grid">
                <div class="category-item" onclick="filterByCategory('knowledge')">
                    <div class="category-icon">🌱</div>
                    <div class="category-name">青春悄悄话</div>
                </div>
                <div class="category-item" onclick="filterByCategory('trouble')">
                    <div class="category-icon">💭</div>
                    <div class="category-name">成长小烦恼</div>
                </div>
                <div class="category-item" onclick="filterByCategory('girl')">
                    <div class="category-icon">👧🏻</div>
                    <div class="category-name">女孩专区</div>
                </div>
                <div class="category-item" onclick="filterByCategory('boy')">
                    <div class="category-icon">👦🏻</div>
                    <div class="category-name">男孩专区</div>
                </div>
            </div>
        </div>

        <!-- 资源列表 -->
        <div id="loadingIndicator" class="loading" style="display: none;">
            <div class="spinner"></div>
            正在加载资源...
        </div>

        <div id="errorContainer"></div>

        <div class="resources-grid" id="resourcesGrid">
            <!-- 资源卡片将通过JavaScript动态生成 -->
        </div>

        <!-- 分页 -->
        <div class="pagination" id="pagination">
            <button onclick="changePage(1)">1</button>
            <button onclick="changePage(2)" class="active">2</button>
            <button onclick="changePage(3)">3</button>
            <button onclick="changePage(4)">4</button>
            <button onclick="changePage(5)">5</button>
        </div>
    </div>
</div>

<!-- 资源详情模态框 -->
<div class="modal" id="resourceModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title" id="modalTitle"></h3>
            <button class="close-button" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body" id="modalBody">
            <!-- 详细内容将在这里显示 -->
        </div>
    </div>
</div>

<div class="footer">
    © 2025 贵州省先进计算省重点实验室 版权所有
</div>

{% load static %}
<script src="{% static 'js/learning.js' %}"></script>
</body>
</html>